<template>
	<!-- 分享弹窗 -->
	<uni-popup ref="sharepopup" type="bottom">
		<view class="sharebtn">
			<view class="uni-share">
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box"
						@click='btnShare(item.name)'>
						<view class="uni-share-content-image">
							<image :src="item.icon" class="content-image" />
						</view>
						<text class="uni-share-content-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	data() {
		return {
			bottomData: [{
				text: '微信',
				icon: '/uni_modules/share-btn/static/index/weixin.png',
				name: 'wx'
			},
			{
				text: '朋友圈',
				icon: '/uni_modules/share-btn/static/index/pengyouquan.png',
				name: 'wx-timeline'
			},
			{
				text: 'QQ',
				icon: '/uni_modules/share-btn/static/index/qq.png',
				name: 'qq'
			},
			{
				text: '复制',
				icon: '/uni_modules/share-btn/static/index/copy.png',
				name: 'copy'
			}
			],
			// sharedataTemp: {
			// 	type: 0,
			// 	strShareUrl: "https://uniapp.dcloud.io",
			// 	strShareTitle: "分享标题",
			// 	strShareSummary: "分享总结",
			// 	strShareImageUrl: "/static/sharemenu/copyurl.png"
			// }
		}
	},
	props: ["sharedataTemp"],
	// onLoad() {
	// 	console.log('sharedataTemp',this.sharedataTemp);
	// },
	methods: {
		btnShare(name) {
			console.log(name);
			var strProvider = "",
				strScene = "",
				mytype = '';
			switch (name) {
				case 'wx':
					strProvider = "weixin"
					strScene = "WXSceneSession"
					mytype = 0
					break;
				case 'wx-timeline':
					strProvider = "weixin"
					strScene = "WXSenceTimeline"
					mytype = 0
					break;
				case 'qq':
					strProvider = "qq"
					mytype = 1
					break;
				case 'copy':
				strProvider = "copy"
					uni.setClipboardData({
						data: this.sharedataTemp.strShareUrl,
						complete() {
							uni.showToast({
								title: "已复制到剪贴板"
							})
						}
					})
					break;
			}
			if (strProvider != "copy") {
				// #ifdef H5
				// this.jWeixin 在main.js 注册的 wxsdk
				const shareFuncMap = {
					'wx': this.jWeixin.onMenuShareAppMessage,
					'wx-timeline': this.jWeixin.onMenuShareTimeline
				}
				const shareFunc = shareFuncMap[name];
				console.log("jWeixin[shareFuncMap]", shareFuncMap[name]);
				shareFunc({
					title: this.sharedataTemp.strShareTitle, // 分享标题  
					link: this.sharedataTemp.strShareUrl, // 分享链接  
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						uni.showToast({
							title: '分享失败',
							icon: 'error'
						});
						console.error("fail:" + JSON.stringify(err));
					}
				})
				// #endif
				// #ifndef H5
				uni.share({
					provider: strProvider,
					scene: strScene,
					type: mytype,
					href: this.sharedataTemp.strShareUrl,
					title: this.sharedataTemp.strShareTitle,
					summary: this.sharedataTemp.strShareSummary,
					imageUrl: this.sharedataTemp.strShareImageUrl,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						uni.showToast({
							title: '分享失败',
							icon: 'error'
						});
						console.error("fail:" + JSON.stringify(err));
					}
				})
				// #endif

			}
		},
		open(option = {}) {
			const { btnList } = option;
			if (btnList && btnList.length > 0) {
				// 过滤出分享按钮
				this.bottomData = this.bottomData.filter(item => {
					return (btnList.indexOf(item.name) != -1);
				});
			}
			this.$refs.sharepopup.open();
		}
	}
}
</script>

<style lang="scss">
/* 底部分享 */
.sharebtn {
	.uni-share {
		width: 690rpx;
		margin: 30rpx;
		border-radius: 30rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;

		.uni-share-content {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			overflow-x: scroll;
			padding: 15px 50rpx;

			.uni-share-content-box {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				align-items: center;
				// width: 25%;
				// justify-content: space-between;
				margin-right: 60rpx;

				&:nth-last-child(1) {
					margin-right: 0;
				}

				.uni-share-content-image {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 90rpx;
					height: 90rpx;
					overflow: hidden;
					border-radius: 10rpx;

					.content-image {
						width: 90rpx;
						height: 90rpx;
					}
				}

				&:nth-last-child(1) {
					.uni-share-content-image .content-image {
						width: 50rpx !important;
						height: 50rpx !important;
					}
				}

				.uni-share-content-text {
					font-size: 26rpx;
					color: #333;
					padding-top: 5px;
					padding-bottom: 10px;
				}
			}
		}
	}
}
</style>
